<%@ page import="bean.User" %>
<%@ page import="bean.Article" %>
<%@ page import="bean.Label" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Category" %><%--
  Created by IntelliJ IDEA.
  User: 蒋缇
  Date: 2020/10/15
  Time: 1:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    User user=(User)request.getSession().getAttribute("user");
    Article article=(Article)request.getSession().getAttribute("editArticle");
    ArrayList<Label> labels=(ArrayList<Label>)session.getAttribute("userLabels");
    ArrayList<Category> articleCategories=(ArrayList<Category>)session.getAttribute("userCategories");
%>
<html>
<head>
    <title>编辑博客</title>
    <link rel="stylesheet" href="editor/css/style.css" />
    <link rel="stylesheet" href="editor/css/editormd.css" />
    <script src="editor/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet"  href="css/bootstrap.min.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="editor/editormd.min.js"></script>
    <script type="text/javascript">
        let testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "100%",
                height  : "100%",
                syncScrolling : "single",
                path    : "<%=path %>/editor/lib/", //依赖lib文件夹路径
                emoji : true,
                taskList : true,
                tocm     : true,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "<%=basePath%>UploadBlogPhotoServlet",		//上传图片控制器Mapping
                saveHTMLToTextarea: true
            });
        });
    </script>
</head>
<body>
<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="input-group">
                <span class="input-group-btn">
                    <button href="websiteHomepage.jsp" class="btn btn-info">﹤返回首页</button>
                </span>
            <input type="text" id="title" name="title"  value="<%=article.getTitle()%>" class="form-control" placeholder="请输入标题">
            <span class="input-group-btn">
                    <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-danger">发布文章</button>
                </span>
        </div><!-- /input-group -->
    </div>
    <div class="col-lg-1"></div>
</div>
<!-- Editor容器... -->
<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="editormd" id="test-editormd">
            <textarea  class="editormd-markdown-textarea" id="editormd"><%=article.getContent()%></textarea>
        </div>
    </div>
    <div class="col-lg-1"></div>
</div>
<%--    模态框--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">发布文章</h4>
            </div>
            <div class="modal-body">
                <div class="row" >
                    <div class="col-md-2">
                        <button class="btn btn-default">文章标签</button>
                    </div>
                    <div class="col-md-6">
                            <%
                                for(Label label:labels){
                            %>
                            <span><%=label.getContent()%></span>
                            <input type="checkbox" name="label" value="<%=label.getContent()%>">
                            <%
                                }
                            %>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-default">文章分类</button>
                    </div>
                    <div class="col-md-6">
                        <select id="category" class="btn btn-info">
                            <option value="-1">请选择</option>
                            <%
                                for(Category category:articleCategories){
                            %>
                            <option value="<%=category.getId()%>"><%=category.getName()%></option>
                            <%
                                }
                            %>
                        </select>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-default">文章专栏</button>
                    </div>
                    <div class="col-md-6">
                        <select id="subfield" class="btn btn-info">
                            <option value="0">请选择</option>
                            <option value="动态">动态</option>
                            <option value="程序人生">程序人生</option>
                            <option value="Java">Java</option>
                            <option value="5G">5G</option>
                            <option value="数据库">数据库</option>
                            <option value="计算机基础">计算机基础</option>
                            <option value="前端">前端</option>
                        </select>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-default">文章类型</button>
                    </div>
                    <div class="col-md-6">
                        <select id="type" class="btn btn-info">
                            <option value="0">请选择</option>
                            <option value="原创">原创</option>
                            <option value="转载">转载</option>
                            <option value="翻译">翻译</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="publish()">发布文章</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div><!-- /.modal -->
<script type="text/javascript">
    function publish() {
        let labels=new Array(4);
        let cnt=0;
        let label=document.getElementsByName('label');
        for(let i=0;i<label.length;i++){
            if(label[i].checked){
                labels[cnt]=label[i].value;
                cnt++;
            }
        }
        let blog = $("#editormd").val();
        let title =document.getElementById("title").value;
        let category=document.getElementById("category").value;
        let type=document.getElementById("type").value;
        let subfield=document.getElementById("subfield").value;
        if (blog === "" || title === "") {
            alert("编辑内容或标题不能为空");
            return ;
        } else {
            if(cnt===0){
                alert("请添加文章标签");
                return ;
            }else{
                if(cnt>4){
                    alert("最多添加4个标签");
                    return ;
                }else {
                    if (category === "-1") {
                        alert("请选择文章类别");
                        return ;
                    } else {
                        if (type === "0") {
                            alert("请选择文章类型");
                            return ;
                        } else {
                            if (subfield === "0") {
                                alert("请选择文章分栏");
                                return ;
                            } else {
                                //博客内容提交
                                $.ajax(
                                    {
                                        data: {
                                            "updateArticleId": "<%=article.getId()%>",
                                            "updateArticleContent": blog,
                                            "updateArticleTitle": title,
                                            "updateArticleUser": "<%=user.getAccount()%>",
                                            "updateArticleLabels": labels,
                                            "updateArticleCategory": category,
                                            "updateArticleType": type,
                                            "updateArticleSubfield": subfield
                                        },
                                        dataType: 'text',
                                        type: 'post',
                                        traditional: true,
                                        url: '<%=basePath%>UpdateBlogServlet',
                                        success: function () {
                                            alert("发布成功");
                                            window.location = "<%=basePath%>personalHompage.jsp";
                                        },
                                        error: function () {
                                            alert("发布失败")
                                        }
                                    }
                                );
                            }
                        }
                    }
                }
            }
        }
    }
</script>
</body>
</html>